<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy</title>
</head>
<body>
    <div id="app"></div>
    <button onclick="count()">更新</button>
    <script>
        // "use strict";
        // let object = {name:"林默涵",age:7,_love:"吃饭饭"};

        // Object.defineProperty(object,"age",{
        //     // writable:false,
        //     // configurable:false,
        // })

        // let proxy = new Proxy(object,{
        //     get(target,key){
        //         //静态方法调用Proxy代理方法Api
        //         return Reflect.get(target,key);
        //     },
        //     set(target,key,value){
        //         if(key=== "age"){
        //             if(!Number.isInteger(value)){
        //                 throw new TypeError("the age is not an integer")
        //             }

        //             if(value>18 || value<=0){
        //                 throw new RangeError("输入的年龄范围有误");
        //             }
        //         }

        //         Reflect.set(target,key,value);
        //         return true;
        //     },
        //     deleteProperty(target,key){
        //         if(key.indexOf("_") === 0 ){
        //             throw new Error("无法删除私有属性")
        //         }
        //         Reflect.deleteProperty(target,key);
        //         return true;
        //     }
        // })

        // proxy.age = 17;

        // delete proxy.name;
        // console.log(object);
        // console.log(proxy);


        // //封装一个方法，创建数组，生成代理对象
        // function createArray(...ele){
        //     const handler = {
        //         get(target,propKey,receiver){
        //             let index = Number(propKey);
        //             //支持数组负数索引
        //             if(index<0){
        //                 propKey = String(target.length+index);
        //             }
        //             return Reflect.get(target,propKey,receiver);
        //         }
        //     }
        //     let target = [];
        //     target.push(...ele);
        //     return new Proxy(target,handler);
        // }

        // let proxy_arr = createArray(1,2,3,4,5,6);

        // console.log(proxy_arr,proxy_arr[-2]);

        //观察者模式设计逻辑
        // let queueObservers = new Set();
        // //定义一个函数存储队列操作,可以自定义更新视图的操作
        // const observe = fn => queueObservers.add(fn)

        // const observable = obj => new Proxy(obj,{set});
        
        // function set(target, key, value, proxy) {
        //     console.log(123123)
        //     let res = Reflect.set(target, key, value, proxy);
        //     //数据更新，触发视图更新逻辑
        //     queueObservers.forEach(observer=>observer());//执行观察者模式的函数
        //     return res;
        // }

        // let objs = { name: "liguanh",age:20 };

        // let update = (prox)=>{
        //     app.innerText = `姓名:${proxy.name},年龄:${proxy.age}`;
        // }

        // //生成响应式逻辑
        // let proxy = observable(objs);
        // update(proxy);

        // //注册函数，数据更新时触发监听者更新
        // observe(() => {
        //     console.log("更新视图执行逻辑")
        //     update(proxy);
        // })
        // let count = ()=>{
        //     proxy.age++;
        // }

        let user = {name:"小猫咪",age:3};

        let proxy = new Proxy(user,{
            get(target,key){
                return Reflect(target,key);
            },

            has(target,key){
                console.log(key);
                return Reflect.has(target,key);
            },
            ownKeys(target){
                console.log(target,"测试");
                let res = Reflect.ownKeys(target);
                return res;
            }
        })

        console.log(Object.keys(proxy));


        console.log("love" in proxy);
        
    </script>
</body>

</html>